<template>
  <div>
    <!-- 登录页 -->
    <van-nav-bar class="titlebgc" title="登录" :border="false">
      <template #right>
        <router-link class="link" to="/register">立即注册</router-link>
      </template>
    </van-nav-bar>
    <!-- 登录表单 -->
    <div class="main">
      <div class="h1">用户名登录</div>
      <div>
        <van-field
          label="用户名"
          type="text"
          v-model="sname"
          placeholder="请输入用户名"
        />
        <van-field
          label="密码"
          type="password"
          v-model="spwd"
          placeholder="请输入密码"
        ></van-field>
      </div>
      <button @click="login" :class="{ disable: !sname || !spwd }" class="log">
        登录
      </button>
      <!-- 忘记密码？ -->
      <div class="nopwd">
        <router-link to="/nopwd">忘记密码？</router-link>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex'
export default {
  data() {
    return {
      sname: "",
      spwd: "",
    };
  },
  methods: {
    login() {
      // 非空验证
      const { sname, spwd } = this;
      if (!sname || !spwd) return;
      const params = { sname, spwd };
      const url = "api/users/login";
      this.axios.post(url, params).then((res) => {
        const { code, token} = res.data;
        if (code == 200) {
          // 弹窗
          this.$toast({
            message: "登录成功",
            position: "bottom",
          });
          sessionStorage.setItem("token", token);
          this.$router.push('/home/me')
        } else {
          this.$toast({
            message: "用户名或密码错误，请重新输入",
            position: "bottom",
          });
        }
      });
    },
    ...mapMutations(['updateIsSale'])
  },
};
</script>

<style lang="scss" scoped>
.link {
  color: #fff;
}
// 头部
.titlebgc {
  background-color: #9a4145;
  ::v-deep .van-nav-bar__title {
    color: #fff;
  }
}
.main {
  padding: 0 15px;
  div {
    // 标题
    &.h1 {
      font-family: "微软雅黑";
      font-size: 1.5em;
      padding-top: 80px;
      padding-bottom: 50px;
    }
    &.nopwd {
      position: fixed;
      bottom: 1.562vh;
      left: 0;
      right: 0;
      text-align: center;
      a {
        color: #333;
        font-size: 0.9em;
      }
    }
  }
  .van-field {
    border-bottom: 1px solid #f6f6f6;
  }
  button {
    margin-top: 20px;
    &.log {
      border: none;
      width: 100%;
      padding: 10px 0 8px 0;
      font-size: 0.8em;
      border-radius: 6px;
      color: #fff;
      background-color: #9a4145;
    }
    &.disable {
      background-color: lightgray;
    }
  }
}
</style>